<template>
    <!--环保用电-->
    <div class="ecoFriendlyElectricity">
        <div class="header">
            <p>月度环保用电：<span>0</span>度</p>
        </div>
        <div class="header_icon">
            <span></span>
            <h3>近1年环保设备用电</h3>
        </div>
        <div class="ecoFriendlyElectricity_echarts">
            <chart-view
                :chart-option="state.equipmentStatistics"
                :auto-resize="true"
                height="100%"
                style="height: 100%"
            ></chart-view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, reactive} from "vue";
import {EchartsMethods} from "@/chart/index";
const state=reactive({
    equipmentStatistics: {}
})
onMounted(() => {
    nextTick(() => {
        state.equipmentStatistics = EchartsMethods.EquipmentElectricity();
    });
});
</script>

<style scoped lang="scss">
.ecoFriendlyElectricity {
    height: 90%;
    .header {
        display: flex;
        justify-content: center;
        p{
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #FFFFFF;
            span{
                @include pmzd();
                font-size: 20px;
                margin-right: 2px;
            }
        }
    }
    .header_icon{
        display: flex;
        align-items: center;
        span{
            width: 25px;
            height: 25px;
            display: block;
            background: url('@/assets/image/titleboxicon.png') no-repeat;
            background-size: 100%;
            transform: rotate(45deg);
            margin-right: 4px;
        }
        h3{
            font-size: 12px;
            font-weight: 500;
            color: #1B93FB;
            letter-spacing: 2px;
        }
    }
    &_echarts{
        height: 73%;
    }
}
</style>